<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            background-image:url("image/bg1.jpg");
        }
        #box2{
            background-image:url("image/bg1.jpg");
        }
    </style>
</head>
<body>
        <div id="box">aaa</div>
        <div id="box2">aaa</div>
        <script>
            var s = document.getElementById('box');
            var s2 = document.getElementById('box2');
            var z = getView();//z = {x:121,y:232}
            console.log(z);

//            s.style.height = '100px';
            s.style.height = z.y + 'px';
            s2.style.height = z.y + 'px';

//            s.style.height=z.y+'px';    //找到s 这个对象，样式的高等于方法函数 点 图片边框的高度

            /*取得页面的宽高*/
            function getView() {
                return {
                    x:document.documentElement.clientWidth,
                    y:document.documentElement.clientHeight
                }
            }

            /**
             * s2.offsetTop-document.body.scrollTop 元素距离顶部的距离
             * document.documentElement.clientHeight 当前窗口的高度
             * document.documentElement.clientHeight - (s2.offsetTop-document.body.scrollTop)  元素距离底部的距离
             */
        </script>
</body>
</html>